/**
 * This file provided by Facebook is for non-commercial testing and evaluation
 * purposes only. Facebook reserves all rights not expressly granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

var CommentForm = React.createClass({
  getInitialState: function() {
       return {text1: '', text2: ''};
  },
  handleText1Change: function(e) {
	  this.setState({text1: e.target.value});
  },
  handleText2Change: function(e) {
	  this.setState({text2: e.target.value});
  },
  
  handleTextChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
	
    var text1 = this.state.text1.trim();
    var text2 = this.state.text2.trim();
    if (!text1 || !text2) {
      return;
    }
    var url="/keyword" ;
    if (e.target.id =='keyword'){
    	url="/keyword" ;
    }else if (e.target.id =='tokenizer'){
		url="/tokenizer" ;
  	}else if (e.target.id =='similary'){
		url="/similary" ;
  	}
    $.ajax({
        url: url,
        dataType: 'json',
        type: 'POST',
        data: {"text":text1},
        success: function(data) {
      	if (data.success){
      		//this.setState({data: data.object});
      		this.setState({result1: JSON.stringify(data.object)});
          }else {
          	this.setState({result1: data.message});
      		//this.setState({data: data.message});
          }
        }.bind(this),
        error: function(xhr, status, err) {
          //this.setState({data: comments});
          this.setState({result1:status});
          console.error(this.props.url, status, err.toString());
        }.bind(this)
    
   // this.props.onCommentSubmit({text1: text1, text: text});
   //this.setState({text1: '', text: ''});
    });
    $.ajax({
        url: url,
        dataType: 'json',
        type: 'POST',
        data: {"text":text2},
        success: function(data) {
      	if (data.success){
      		//this.setState({data: data.object});
      		this.setState({result2: JSON.stringify(data.object)});
          }else {
          	this.setState({result2: data.message});
      		//this.setState({data: data.message});
          }
        }.bind(this),
        error: function(xhr, status, err) {
          //this.setState({data: comments});
          this.setState({result2:status});
          console.error(this.props.url, status, err.toString());
        }.bind(this)
   // this.props.onCommentSubmit({text1: text1, text: text});
   //this.setState({text1: '', text: ''});
    });
    $.ajax({
        url: "similarity",
        dataType: 'json',
        type: 'POST',
        data: {"text1":text1,"text2":text2},
        success: function(data) {
      	if (data.success){
      		//this.setState({data: data.object});
      		this.setState({result: JSON.stringify(data.object)});
          }else {
          	this.setState({result: data.message});
      		//this.setState({data: data.message});
          }
        }.bind(this),
        error: function(xhr, status, err) {
          //this.setState({data: comments});
          this.setState({result:status});
          console.error(this.props.url, status, err.toString());
        }.bind(this)
   // this.props.onCommentSubmit({text1: text1, text: text});
   //this.setState({text1: '', text: ''});
    });   
    
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <li>输入：</li>
       <textarea
          type="text"
          rows="15" 
          cols="30"
          placeholder="输入文本1"
          value={this.state.text1}
          onChange={this.handleText1Change}
        />
        <label>----</label>
        <textarea
          type="text"
          rows="15"
          cols="30"
          placeholder="输入文本2"
          value={this.state.text2}
          onChange={this.handleText2Change}
        />
        <li>结果：</li>
        <textarea
        type="text"
        rows="15" 
        cols="30"
        placeholder="结果1"
        value={this.state.result1}
      />
      <label>----</label>
      <textarea
        type="text"
        rows="15"
        cols="30"
        placeholder="结果2"
        value={this.state.result2}
      />
      <li>相似度</li>
      <textarea
      type="text"
      rows="1"
      cols="30"
      placeholder="Say something..."
      value={this.state.result}
    />
      <li></li>
        <input type="button" onClick={this.handleSubmit} id="keyword" value="关键字" text="关键字" /><input type="button" onClick={this.handleSubmit} id="tokenizer"  value="分词" />
      </form>
    );
  }
});

ReactDOM.render(
  <CommentForm url="/keyword"  />,
  document.getElementById('content')
);
